<template>
    <div class="loading-full">
      <transition name="slide-fade">
        <div class="loading" v-show="!noLoading"></div>
      </transition>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
      data() {
        return {
          noLoading: false
        }
      },
      created() {
        setTimeout(() => {
          this.noLoading = true
        }, 150)
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .loading-full
    .loading
      position absolute
      width 100%
      height 100%
      top 0
      left 0
      background #f5f5fa
      z-index 10
    .slide-fade-enter-active
      transition: all .3s ease
    .slide-fade-leave-active
      transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0)
    .slide-fade-enter, .slide-fade-leave-to
      transform: translateX(10px)
      opacity: 0
</style>
